<template>
  <div class="content-main flex" v-if="contextList.length > 0">
    <van-list :finished="finished" v-model="loading" finished-text="" loading-text="" @load="onLoad">
      <template v-if="activeName == 'goods' || activeName == 'article' || activeName == 'video'">
        <div class="content-item flex-a-c" v-for="item in contextList" :key="item.id">
          <img :src="item.cover" alt="" class="content-item-left" v-if="activeName == 'video'" />
          <img :src="item.thumb" alt="" class="content-item-left" v-else />
          <div class="content-item-right">
            <div class="f-14">{{ item.title }}</div>
            <div class="content-item-right_price" v-if="activeName == 'goods'">￥{{ item.price }}</div>
            <div class="flex-j-sb">
              <div class="stock" v-if="activeName == 'goods'">库存{{ item.stock }}</div>
              <div class="stock" v-if="activeName == 'article'">{{ item.author }}</div>
              <div class="videoUser" v-if="activeName == 'video'">
                <div class="videoUserImg" v-if="item.head">
                  <img :src="item.head" alt="" />
                </div>
                <div class="name">{{ item.author }}</div>
              </div>
              <div class="btn">
                <div class="send_btn" @click="sendMessage(item)">发送</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="activeName == 'communities'">
        <div class="content-item_communities flex-a-c" v-for="item in contextList" :key="item.id">
          <div class="content-item_communities_user">
            <div class="content-item_left_communities">
              <div class="item_left_communities_top">
                <div class="item_left_communities_img">
                  <img :src="item.head" alt="" />
                </div>
                <div class="item_left_communities_name">{{ item.uname }}</div>
              </div>
            </div>
            <div class="content-item_right_communities">
              <div class="btn">
                <div class="send_btn" @click="sendMessage(item)">发送</div>
              </div>
            </div>
          </div>
          <div class="communities">
            <div class="communitiestitle">{{ item.title }}</div>
            <div class="communitiesImg">
              <img :src="item.thumb" alt="" />
            </div>
          </div>
        </div>
      </template>
      <template v-if="activeName == 'message_base'">
        <div class="content-item_message_base" v-for="item in contextList" :key="item.id">
          <div class="item_message_base_title">{{ item.article_name }}</div>
          <div class="item_message_base_author">
            <span class="ad">{{ item.creater_name }}</span>
            发布于 {{ item.base_name }}
          </div>
          <div class="item_message_base_time">
            <div class="time">{{ item.created_at }}</div>
            <div class="btn">
              <div class="send_btn" @click="sendMessage(item)">发送</div>
            </div>
          </div>
        </div>
      </template>
    </van-list>
  </div>
</template>

<script>
import { Toast } from "vant";
import { appAgentConfig } from "utils/wx_app_agent_mixin.js"; // 企业微信侧边栏应用授权
export default {
  mixins: [appAgentConfig],
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    finished: {
      type: Boolean,
      default: false
    },
    contextList: {
      type: null,
      default: []
    },
    activeName: {
      type: String,
      default: ""
    },
    isSignWorkApp:{
      type:null,
      default:''
    }
  },
  data() {
    return {
      cateId: "",
    };
  },
  watch: {
    isSignWorkApp(nval){
      console.log(nval,'dddddddddd123d')
    }
  },
  methods: {
    sendMessage(item) {
      this.getMediaId(item.id);
    },
    getMediaId(id) {
      return $http.get("plugin.speechcraft-library.frontend.controller.member.Material.getHeadContent", { option_id: id, type: this.activeName },'加载中').then(res => {
        if (res.result != 1) {
          return this.$toast(res.msg);
        }
        // this.sendChatMessage(res.data, item.id);
        console.log(res.data);
        this.$emit('sendMsgChild',res.data)
      });
    },
    sendChatMessage_childList(list, id) {
      let chatMessConfig = this.messageConfig(list);
      wx.invoke("sendChatMessage", chatMessConfig, res => {
        if (res.err_msg == "sendChatMessage:ok") {
          //全部发送成功
          if (index === contentList.length - 1) {
            Loading.close();
            Toast.success("话术已生成，请点击聊天框发送按钮！");
          }
        } else {
          Loading.close();
          Toast.fail("话术发送失败");
        }
      });
    },
    onLoad() {
      this.$emit("onLoad", this.cateId, this.finished);
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.content-main {
  flex-direction: column;
  padding: 0.625rem 0;

  .content-item {
    padding: 0.5rem;
    background: #fff;
    margin-bottom: 0.63rem;
    border-radius: 0.47rem;
    width: 100%;

    .content-item-left {
      width: 4.06rem;
      height: 4.06rem;
      margin: 0;
      border-radius: 5px;
      margin-right: 0.47rem;
      object-fit: cover;
    }

    .content-item-right {
      flex: 1;
      height: 4.06rem;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;

      .f-14 {
        width: 100%;
        font-size: 0.81rem;
        line-height: 0.75rem;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }

      .content-item-right_price {
        font-size: 0.63rem;
        font-weight: 400;
        color: #f14e4e;
        line-height: 0.75rem;
      }

      .flex-j-sb {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .stock {
          color: #999;
          font-size: 0.63rem;
        }

        .videoUser {
          display: flex;

          .videoUserImg {
            width: 1rem;
            height: 1rem;
            border-radius: 100%;

            img {
              width: 1rem;
              height: 1rem;
              border-radius: 100%;
            }
          }
        }

        .btn {
          padding: 0.34rem 0.63rem;
          background: #f78b00;
          border-radius: 0.13rem;

          .send_btn {
            color: #fff;
            font-size: 0.63rem;
            cursor: pointer;
          }
        }
      }
    }
  }
}
// 知识库
.content-item_message_base {
  padding: 0.5rem;
  background: #fff;
  margin-bottom: 0.63rem;
  border-radius: 0.47rem;
  display: flex;
  flex-direction: column;
  text-align: left;

  .item_message_base_title {
    font-size: 0.81rem;
    color: #202020;
  }

  .item_message_base_author {
    font-size: 0.69rem;
    font-weight: 400;
    color: #5ab79c;
    padding: 0.5rem 0;

    .ad {
      color: #333;
    }
  }

  .item_message_base_time {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
      font-size: 0.63rem;
      color: #999;
    }
  }

  .btn {
    padding: 0.34rem 0.63rem;
    background: #f78b00;
    border-radius: 0.13rem;

    .send_btn {
      color: #fff;
      font-size: 0.63rem;
    }
  }
}
//微社区
.content-item_communities {
  padding: 0.5rem;
  background: #fff;
  margin-bottom: 0.63rem;
  border-radius: 0.47rem;
  display: flex;
  flex-direction: column;

  .communities {
    width: 100%;
    margin-top: 0.91rem;

    .communitiestitle {
      text-align: left;
      font-size: 0.75rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #333;
    }

    .communitiesImg {
      width: 2.66rem;
      height: 2.66rem;
      border-radius: 0.13rem;
      margin-top: 0.59rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.13rem;
      }
    }
  }

  .content-item_communities_user {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .content-item_left_communities {
      display: flex;
      justify-content: space-between;

      .item_left_communities_top {
        display: flex;
        align-items: center;
      }

      .item_left_communities_img {
        width: 1.41rem;
        height: 1.41rem;
        margin-right: 0.28rem;
        border-radius: 100%;

        img {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
    }

    .content-item_right_communities {
      .btn {
        padding: 0.34rem 0.63rem;
        background: #f78b00;
        border-radius: 0.13rem;

        .send_btn {
          color: #fff;
          font-size: 0.63rem;
        }
      }
    }
  }
}
</style>